/*
 * Copyright (c) 2021 Huawei Device Co., Ltd.
 * Licensed under the Apache License,Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import tcpserverapi from '@ohos.tcpserverapi'

var compass_canvas = null;
var compass_context = null;
var line_canvas = null;
var line_context = null;

export default {
    data: {
        width: 700,
        height: 700,
        outsideRadius: 0,
        insideRadius: 0,
        positionTextSize: '',
        angleNumberSize: '',
        isFirstShowFlag: true,
        positionTexts: ["北", "东", "南", "西"],
        angleNumbers: ['0', '30', '60', '90', '120', '150', '180', '210', '240', '270', '300', '330'],
        angle: 0,
        position: '北 0',
        intervalID: 0
    },
    onInit() {
    },
    onAttached() {
        this.getCompassMsg();
    },
    onShow() {
        this.getWindowSize();
        this.initCanvas();
    },
    initCanvas() {
        compass_canvas = this.$refs.compassCanvas;
        compass_context = compass_canvas.getContext('2d', {
            antialias: true
        });

        line_canvas = this.$refs.lineCanvas;
        line_context = line_canvas.getContext('2d', {
            antialias: true
        });
        if (this.isFirstShowFlag) {
            compass_context.translate(this.width / 2, this.height / 2); //移动当前坐标系的原点。
            line_context.translate(this.width / 2, this.height / 2); //移动当前坐标系的原点。
            this.drawCircle(this.outsideRadius, '#F9F9F9');  //外圆，传入外圆半径和颜色
            this.drawCircle(this.insideRadius, '#FFFFFF');  //内圆，传入内圆半径和颜色
            this.drawAngleNumber(); // 外围数字角度绘制
            this.drawPositionText();  // 内部东西南北方位文字绘制
            this.drawAngleLine(); // 刻度盘竖线绘制
            this.drawPositionLine(); //指示线绘制
        }
        this.isFirstShowFlag = false;
    },
    getWindowSize() {
        this.outsideRadius = this.width / 2 - this.width / 7;  // 计算外圆半径
        this.insideRadius = this.outsideRadius - this.width / 8;   // 计算内圆半径
    },
    drawCircle(radius, color) {
        compass_context.beginPath(); //创建一个新的绘制路径。
        compass_context.fillStyle = color; // 指定绘制的填充色。
        compass_context.strokeStyle = color;//设置描边的颜色。
        compass_context.arc(0, 0, radius, 0, 6.28); //绘制弧线路径。
        compass_context.fill();//对封闭路径进行填充。
    },
    drawPositionText() {
        compass_context.beginPath();
        this.positionTextSize = this.width / 20;
        compass_context.font = this.positionTextSize + 'px' + ' sans-serif';
        for (let i = 0; i < this.positionTexts.length; i++) {
            if (i == 0) {
                compass_context.fillStyle = '#FF00000';
                this.drawTriangle();
            } else {
                compass_context.fillStyle = '#0000000';
            }
            let positionText = this.positionTexts[i];
            compass_context.fillText(positionText, -this.width / 40, -this.width / 9);
            compass_context.stroke();
            compass_context.rotate(90 * Math.PI / 180);
        }
    },
    drawTriangle() {
        compass_context.beginPath();
        compass_context.fillStyle = '#FF00000';
        compass_context.moveTo(0, -this.width / 5);
        compass_context.lineTo(this.width / 40, -this.width / 5 + this.width / 35);
        compass_context.lineTo(-this.width / 40, -this.width / 5 + this.width / 35);
        compass_context.closePath();
        compass_context.fill();
    },
    drawAngleNumber() {
        compass_context.beginPath();  // 创建一个新的绘制路径。
        this.angleNumberSize = this.width / 30; // 角度数字文字大小。
        compass_context.font = this.angleNumberSize + 'px' + ' sans-serif';  // 角度数字文字大小转换。
        for (var i = 0; i < this.angleNumbers.length; i++) {
            if (i == 0) {                                        // 判断是0 设备颜色为红色，其他为灰黑色。
                compass_context.fillStyle = '#FF00000';
            } else {
                compass_context.fillStyle = '#AF000000';
            }
            let number = this.angleNumbers[i]; // 获取数组对象里面的数字内容。
            compass_context.fillText(number, -this.width / 85, -this.width / 2.45); // 绘制填充类文本。
            compass_context.rotate(30 * Math.PI / 180); // 设置当前坐标轴进行顺时针旋转，成圆形排列
        }
    },
    drawAngleLine() {
        compass_context.strokeStyle = '#000000'; //设置描边的颜色。
        // 总共有60 个刻度，按5的倍数进行线条加粗。
        for (var i = 0; i < 60; i++) {
            if (i == 0 || i == 5 || i == 10 || i == 15 || i == 20 || i == 25 || i == 30 || i == 35 || i == 40 || i == 45 || i == 50 || i == 55) {
                compass_context.lineWidth = 3;
                compass_context.beginPath(); // 创建一个新的绘制路径。
                compass_context.moveTo(0, this.insideRadius + (this.outsideRadius - this.insideRadius) / 4); // 当前点移动到指定点。
                compass_context.lineTo(0, this.outsideRadius - this.width / 30); // 从当前点到指定点进行路径连接

            } else {
                compass_context.lineWidth = 0.5;
                compass_context.beginPath();
                compass_context.moveTo(0, this.insideRadius + (this.outsideRadius - this.insideRadius) / 4);
                compass_context.lineTo(0, this.outsideRadius - this.width / 30);
            }
            compass_context.stroke();
            compass_context.rotate(15 * Math.PI / 450);
        }
    },
    drawPositionLine() {
        line_context.strokeStyle = '#000000';
        line_context.lineWidth = 6;
        line_context.lineCap = 'round';  // 线端点以圆形结束。
        line_context.moveTo(0, -this.outsideRadius + this.width / 15);
        line_context.lineTo(0, -this.outsideRadius - this.width / 28);
        line_context.stroke(); // 进行边框绘制操作。
    },
    getCompassMsg() {
        this.intervalID = setInterval(() => {
            //NAPI调用
            tcpserverapi.recvMsg().then((result) => {
                var resultAngle = result.message;
                if (resultAngle.match("angle:")) {
                    var info = parseInt(resultAngle.slice(6));
                    if (this.angle != info) {
                        this.angle = info;
                        console.info("===========" + this.angle)
                        if (this.angle >= 0 && this.angle < 23) {
                            this.position = '北 ' + this.angle;
                        }
                        else if (this.angle >= 23 && this.angle < 68) {
                            this.position = '东北 ' + this.angle;
                        }
                        else if (this.angle >= 68 && this.angle < 113) {
                            this.position = '东 ' + this.angle;
                        }
                        else if (this.angle >= 113 && this.angle < 158) {
                            this.position = '东南 ' + this.angle;
                        }
                        else if (this.angle >= 158 && this.angle < 203) {
                            this.position = '南 ' + this.angle;
                        }
                        else if (this.angle >= 203 && this.angle < 248) {
                            this.position = '西南 ' + this.angle;
                        }
                        else if (this.angle >= 248 && this.angle < 293) {
                            this.position = '西 ' + this.angle;
                        }
                        else if (this.angle >= 293 && this.angle < 338) {
                            this.position = '西北 ' + this.angle;
                        }
                        else if (this.angle >= 338 && this.angle < 360) {
                            this.position = '北 ' + this.angle;
                        }
                    }
                }
            });

        }, 100);
    },
    onDestroy() {
        clearInterval(this.intervalID);
    }
}